<template>
  <div class="pageContent">
    <div class="centerAll">
      <div class="topButton">
        <el-button type="primary" @click="buttonClick('appeal')">客诉/备注</el-button>
        <el-button type="primary" @click="buttonClick('chat')">聊天记录</el-button>
        <el-button type="primary" @click="buttonClick('collection')">关联收款单</el-button>
        <el-button type="primary" @click="buttonClick('glRefund')">关联退款单</el-button>
        <el-button type="primary" @click="buttonClick('consultation')">问诊资料</el-button>
        <router-link to="/order_manage/refund">
          <el-button type="primary">申请退款</el-button>
        </router-link>
      </div>

      <el-card shadow="never">
        <template #header>
          <div class="card-header">
            <span>订单信息</span>
          </div>
        </template>
        <OrderInfoForRecipe v-if="prescription.orderId" :prescriptionOrderId="prescription.orderId"></OrderInfoForRecipe>
      </el-card>

      <el-card shadow="never">
        <template #header>
          <div class="card-header">
            <span>订单详情</span>
          </div>
        </template>
        <OrderDetail v-if="prescription.orderId" :prescriptionOrderId="prescription.orderId"></OrderDetail>
      </el-card>

      <!--  处方详情  -->
      <el-card shadow="never" v-if="prescription.type === 1">
        <template #header>
          <div class="card-header">
            <span>处方详情</span>
          </div>
        </template>
        <PrescriptionDetails
          v-if="prescription.orderId"
          :enumsObj="enumsObj"
          :prescriptionOrderId="prescription.orderId"
          :prescriptionId="prescription.id" />
      </el-card>

      <!--物流-->
      <el-card shadow="never" v-if="prescription.type === 3">
        <Logistics></Logistics>
      </el-card>

      <!--   加工费   -->
      <el-card shadow="never" v-if="prescription.type === 2">
        <template #header>
          <div class="card-header">
            <span>加工费详情</span>
          </div>
        </template>
        <ProcessingFee v-if="prescription.orderId"
                       :prescriptionOrderId="prescription.orderId"
                       :prescriptionId="prescription.id" />
      </el-card>
    </div>
  </div>

  <Dialog ref="dialogRef"></Dialog>
</template>

<script setup>
  import {ref,nextTick,onMounted,reactive} from 'vue'
  import Dialog from '../recipeOrder/components/elDialog.vue'
  import Table from '/src/components/Table/index.vue'
  import OrderInfoForRecipe from '../recipeOrder/components/orderInfoForRecipe.vue' //订单信息
  import { enums } from '/src/api/orderManage/recipeOrder'
  import OrderDetail from '../recipeOrder/components/orderDetails.vue' //订单详情
  import PrescriptionDetails from '../recipeOrder/components/prescriptionDetails.vue'
  import Logistics from '../recipeOrder/components/logistics.vue'
  import ProcessingFee from '../recipeOrder/components/processingFee.vue'
  import {useRoute,useRouter} from "vue-router";
  import {ElMessage,ElMessageBox} from 'element-plus'
  const router = useRouter()
  const route = useRoute()
  const dialogRef = ref(null);
  const enumsObj = reactive({
    drugStore: [],
    drugProcess: []
  })
  const prescription = reactive({
    id: "",
    orderId: "",
    type: null
  })
  const getPrescriptionOrderId=() => {
    if (route.query.prescription_order_id){
      prescription.orderId = route.query.prescription_order_id
    }
    if (route.query.prescription_id) {
      prescription.id = route.query.prescription_id
    }
    if (route.query.type) {
      prescription.type = Number(route.query.type)
    }
  }
  //枚举接口enums
  const getEnums = async () => {
    try {
      const result = await enums()
      console.log('枚举', result)
      if (result["code"] === 200) {
        console.log('枚举',result.data)
        enumsObj.drugStore = result.data['drug_store']
        enumsObj.drugProcess = result.data['drug_process']
      }
    } catch (error) {
      console.error('获取列表时出错：', error)
    }
  }
  onMounted(() => {
    getEnums()
    getPrescriptionOrderId()
  });

  const buttonClick = (type) => {
    if (dialogRef.value) {
      dialogRef.value.buttonAll(type);
    }
  };

</script>

<style lang="scss" scoped>
  .topButton ::v-deep .el-button {
    margin: 0;
    margin-bottom: 12px;
    margin-right: 8px;
  }

  ::v-deep .el-card__header {
    background: #fafafa;
    padding: 15px 15px;
  }

  ::v-deep .el-card {
    padding-bottom: 40px;
    margin-bottom: 20px;
  }



  .card-header {
    color: #303133;
    font-size: 16px;
    font-weight: 600;
  }
</style>
